<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../../resource/markdown.css" rel="stylesheet">
  <link href="../../resource/styles.css" rel="stylesheet">
</head>

<body>
<div class="markdown-body">
  <h1 id="markdown-syntax-guide-and-writing-on-mweb">Markdown syntax guide and writing on MWeb</h1>
<h2 id="philosophy">Philosophy</h2>
<blockquote>
<p>Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it&#39;s been marked up with tags or formatting instructions.
Markdown&#39;s syntax is intended for one purpose: to be used as a format for <em>writing</em> for the web.</p>
</blockquote>
<p>&lt;!-- more --&gt;
</p>
<h2 id="notice">Notice</h2>
<p>You can use  <code>CMD + 4</code> or <code>CMD + R</code> to preview the result.</p>
<h2 id="headers">Headers</h2>
<p><strong>Example:</strong></p>
<pre><code># This is an `&lt;h1&gt;` tag
## This is an `&lt;h2&gt;` tag
###### This is an `&lt;h6&gt;` tag
</code></pre><p><strong>Result:</strong></p>
<h1 id="this-is-an-h1-tag">This is an <code>&lt;h1&gt;</code> tag</h1>
<h2 id="this-is-an-h2-tag">This is an <code>&lt;h2&gt;</code> tag</h2>
<h6 id="this-is-an-h6-tag">This is an <code>&lt;h6&gt;</code> tag</h6>
<h2 id="emphasis">Emphasis</h2>
<p><strong>Example:</strong></p>
<pre><code>*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

*You **can** combine them*
</code></pre><p><strong>Shortcuts:</strong>  <code>CMD + U</code>、<code>CMD + I</code>、<code>CMD + B</code>
<strong>Result:</strong></p>
<p><em>This text will be italic</em>
<em>This will also be italic</em></p>
<p><strong>This text will be bold</strong>
<strong>This will also be bold</strong></p>
<p><em>You <strong>can</strong> combine them</em></p>
<h2 id="newlines">Newlines</h2>
<p>End a line with two or more spaces + enter.
Just typing enter to newline,please set：<code>Preferences</code> - <code>Themes</code> - <code>Translate newlines to &lt;br&gt; tags</code>  enable ( default is enable )</p>
<h2 id="lists">Lists</h2>
<h3 id="unordered">Unordered</h3>
<p><strong>Example:</strong></p>
<pre><code>* Item 1 unordered list `* + SPACE`
* Item 2
* Item 2a unordered list `TAB + * + SPACE`
* Item 2b
</code></pre><p><strong>Shortcuts:</strong>  <code>Option + U</code>
<strong>Result:</strong></p>
<ul>
<li>Item 1 unordered list <code>* + SPACE</code></li>
<li>Item 2</li>
<li>Item 2a unordered list <code>TAB + * + SPACE</code></li>
<li>Item 2b</li>
</ul>
<h3 id="ordered">Ordered</h3>
<p><strong>Example:</strong></p>
<pre><code>1. Item 1 ordered list `Number + . + SPACE`
2. Item 2 
3. Item 3
1. Item 3a ordered list `TAB + Number + . + SPACE`
2. Item 3b
</code></pre><p><strong>Result:</strong></p>
<ol>
<li>Item 1 ordered list <code>Number + . + SPACE</code></li>
<li>Item 2 </li>
<li>Item 3</li>
<li>Item 3a ordered list <code>TAB + Number + . + SPACE</code></li>
<li>Item 3b</li>
</ol>
<h3 id="task-lists">Task lists</h3>
<p><strong>Example:</strong></p>
<pre><code>- [ ] task one not finish `- + SPACE + [ ]`
- [x] task two finished `- + SPACE + [x]`
</code></pre><p><strong>Result:</strong></p>
<ul>
<li>[ ] task one not finish <code>- + SPACE + [ ]</code></li>
<li>[x] task two finished <code>- + SPACE + [x]</code></li>
</ul>
<h2 id="images">Images</h2>
<p><strong>Example:</strong></p>
<pre><code>![GitHub set up](https://help.github.com/assets/images/site/set-up-git.gif)
Format: ![Alt Text](url)
</code></pre><p><strong>Shortcuts:</strong>  <code>Control + Shift + I</code>
The Library&#39;s document support drag &amp; drop or <code>CMD + V</code> paste or <code>CMD + Option + I</code> to insert  the picture.
<strong>Result:</strong></p>
<p><img src="https://help.github.com/assets/images/site/set-up-git.gif" alt="GitHub set up"></p>
<p>In MWeb, you can use <code>-w + Number</code> to control image width, for example, set the image width 140px:</p>
<p><img src="https://help.github.com/assets/images/site/set-up-git.gif" alt="GitHub set up-w140"></p>
<h2 id="links">Links</h2>
<p><strong>Example:</strong></p>
<pre><code>email &lt;example@example.com&gt;
[GitHub](http://github.com)
autolink  &lt;http://www.github.com/&gt;
</code></pre><p><strong>Shortcuts:</strong>  <code>Control + Shift + L</code>
The Library&#39;s document support drag &amp; drop or <code>CMD + Option + I</code> to insert attachment.
<strong>Result:</strong></p>
<p>An email <a href="&#x6d;&#x61;&#105;&#x6c;&#116;&#111;&#x3a;&#101;&#x78;&#x61;&#109;&#112;&#x6c;&#x65;&#x40;&#101;&#x78;&#97;&#109;&#112;&#x6c;&#101;&#x2e;&#x63;&#x6f;&#x6d;">&#101;&#x78;&#x61;&#109;&#112;&#x6c;&#x65;&#x40;&#101;&#x78;&#97;&#109;&#112;&#x6c;&#101;&#x2e;&#x63;&#x6f;&#x6d;</a> link.
<a href="http://github.com">GitHub</a>
Automatic linking for URLs
Any URL (like <a href="http://www.github.com/">http://www.github.com/</a>) will be automatically converted into a clickable link.</p>
<h2 id="blockquotes">Blockquotes</h2>
<p><strong>Example:</strong></p>
<pre><code>As Kanye West said:
&gt; We&#39;re living the future so
&gt; the present is our past.
</code></pre><p><strong>Shortcuts:</strong>  <code>CMD + Shift + B</code>
<strong>Result:</strong></p>
<p>As Kanye West said:</p>
<blockquote>
<p>We&#39;re living the future so
the present is our past.</p>
</blockquote>
<h2 id="inline-code">Inline code</h2>
<p><strong>Example:</strong></p>
<pre><code>I think you should use an
`&lt;addr&gt;` `code` element here instead.
</code></pre><p><strong>Shortcuts:</strong>  <code>CMD + K</code>
<strong>Result:</strong></p>
<p>I think you should use an
<code>&lt;addr&gt;</code> <code>code</code> element here instead.</p>
<h2 id="multi-line-code">Multi-line code</h2>
<p><strong>Example:</strong></p>
<pre><code>```js
function fancyAlert(arg) {
    if(arg) {
        $.facebox({div:&#39;#foo&#39;})
    }

}
```
</code></pre><p><strong>Shortcuts:</strong>  <code>CMD + Shift + K</code>
<strong>Result:</strong></p>
<pre><code class="lang-js">function fancyAlert(arg) {
    if(arg) {
        $.facebox({div:&#39;#foo&#39;})
    }

}
</code></pre>
<h2 id="sequence-and-flow-chart">Sequence and Flow chart</h2>
<p><strong>Example:</strong></p>
<pre><code>```sequence
Andrew-&gt;China: Says Hello
Note right of China: China thinks about it
China--&gt;Andrew: How are you?
Andrew-&gt;&gt;China: I am good thanks!
```

```flow
st=&gt;start: Start:&gt;http://www.google.com[blank]
e=&gt;end:&gt;http://www.google.com
op1=&gt;operation: My Operation
sub1=&gt;subroutine: My Subroutine
cond=&gt;condition: Yes
or No?:&gt;http://www.google.com
io=&gt;inputoutput: catch something...

st-&gt;op1-&gt;cond
cond(yes)-&gt;io-&gt;e
cond(no)-&gt;sub1(right)-&gt;op1
```
</code></pre><p><strong>Result:</strong> ( Please enable  <code>Preferences</code> - <code>Themes</code> - <code>Enable sequence &amp; flow chart</code>, default is enable. )</p>
<pre><code class="lang-sequence">Andrew-&gt;China: Says Hello
Note right of China: China thinks about it
China--&gt;Andrew: How are you?
Andrew-&gt;&gt;China: I am good thanks!
</code></pre>
<pre><code class="lang-flow">st=&gt;start: Start:&gt;http://www.google.com[blank]
e=&gt;end:&gt;http://www.google.com
op1=&gt;operation: My Operation
sub1=&gt;subroutine: My Subroutine
cond=&gt;condition: Yes
or No?:&gt;http://www.google.com
io=&gt;inputoutput: catch something...

st-&gt;op1-&gt;cond
cond(yes)-&gt;io-&gt;e
cond(no)-&gt;sub1(right)-&gt;op1
</code></pre>
<p>More info: <a href="http://bramp.github.io/js-sequence-diagrams/">http://bramp.github.io/js-sequence-diagrams/</a>, <a href="http://adrai.github.io/flowchart.js/">http://adrai.github.io/flowchart.js/</a></p>
<h2 id="tables">Tables</h2>
<p><strong>Example:</strong></p>
<pre><code>First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
</code></pre><p>You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:</p>
<p><strong>Result:</strong></p>
<table>
<thead>
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content from cell 1</td>
<td>Content from cell 2</td>
</tr>
<tr>
<td>Content in the first column</td>
<td>Content in the second column</td>
</tr>
</tbody>
</table>
<h2 id="strikethrough">Strikethrough</h2>
<p><strong>Example:</strong></p>
<p>(like <del>this</del>)</p>
<p><strong>Result:</strong></p>
<p>Any word wrapped with two tildes (like <del>this</del>) will appear crossed out.</p>
<h2 id="horizontal-rules">Horizontal Rules</h2>
<p>Following lines will produce a horizontal rule:</p>
<pre><code>***

*****

- - -
</code></pre><p><strong>Result:</strong></p>
<hr>
<hr>
<hr>
<h2 id="latex">LaTex</h2>
<p>Use double US dollars sign pair for Block level Math formula, and one US dollar sign pair for Inline Level.</p>
<pre><code>For example this is a Block level $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ formula, and this is an inline Level $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ formula.

\\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } } \\]
</code></pre><p><strong>Result:</strong></p>
<p>For example this is a Block level $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ formula, and this is an inline Level $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ formula.</p>
<p>\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } } \]</p>
<h2 id="footnote">Footnote</h2>
<p><strong>Example:</strong></p>
<pre><code>This is a footnote:[^sample_footnote]
</code></pre><p><strong>Result:</strong></p>
<p>This is a footnote:[^sample_footnote]</p>
<p>[^sample_footnote]&#x3A; footnote text detail...</p>
<h2 id="comment-and-read-more-">Comment And Read More..</h2>
<p>&lt;!-- comment --&gt;
</p>
<p>&lt;!-- more --&gt;
</p>
<p>Actions-&gt;Insert Read More Comment <em>OR</em> <code>CMD + .</code></p>
<h2 id="toc">TOC</h2>
<p><strong>Example:</strong></p>
<pre><code>[TOC]
</code></pre><p><strong>Result:</strong></p>
<p>[TOC]</p>
  
</div>
</body>

</html>